.device-pixel-border-top{
    position: relative;
    border-top:none!important;
    &:after{
        content: "";
        //box-sizing: border-box;
        position: absolute;
        left: 0;
        top:0;
        width: 100%;
        //height: 100%;
        border: 1px solid #eee;
    }
}

.device-pixel-border-bottom{
    position: relative;
    border-top:none!important;
    &:after{
        content: "";
        //box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom:0;
        width: 100%;
        //height: 100%;
        border: 1px solid #eee;
        z-index: 999;
    }
}

.device-pixel-border-left{
    position: relative;
    border-top:none!important;
    &:before{
        content: "";
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top:-2px;
        //width: 100%;
        height: 100%;
        border: 1px solid #eee;
        z-index: 99;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 1.5dppx)  {
    .device-pixel-border-bottom:after,.device-pixel-border-top:after{
        transform: scaleY(0.7);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 2.0),only screen and (min-resolution: 2dppx)  {
    .device-pixel-border-bottom:after,.device-pixel-border-top:after{
        transform: scaleY(0.5);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 3.0),only screen and (min-resolution: 3dppx)  {
    .device-pixel-border-bottom:after,.device-pixel-border-top:after{
        transform: scaleY(0.33);
        transform-origin: 0 0;
    }
}



@media only screen and(-webkit-min-device-pixel-ratio: 4.0),only screen and (min-resolution: 4dppx)  {
    .device-pixel-border-left:before{
        transform: scaleX(0.25);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 1.5dppx)  {
    .device-pixel-border-left:before{
        transform: scaleX(0.7);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 2.0),only screen and (min-resolution: 2dppx)  {
    .device-pixel-border-left:before{
        transform: scaleX(0.5);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 3.0),only screen and (min-resolution: 3dppx)  {
    .device-pixel-border-left:before{
        transform: scaleX(0.33);
        transform-origin: 0 0;
    }
}

@media only screen and(-webkit-min-device-pixel-ratio: 4.0),only screen and (min-resolution: 4dppx)  {
    .device-pixel-border-left:before{
        transform: scaleX(0.25);
        transform-origin: 0 0;
    }
}
